<template>
  <div class="mt-10">
    <div class="flex gap-4">
      <button class="btn" @click="getSaleInfoByYear">按年查询</button>
      <a-input-search
        v-model:value="year"
        placeholder="输入年份按月查询"
        style="width: 200px"
        @search="getSaleInfoGroupByMonth"
      />
      <a-input-search
        v-model:value="month"
        placeholder="输入月份按日查询"
        style="width: 200px"
        @search="getSaleInfoGroupByDay"
      />
    </div>
    <div class="flex justify-center gap-16 my-10">
      <span>当前输入年份:{{ year ? year : '暂无' }}</span>
      <span>当前输入月份:{{ month ? month : '暂无' }}</span>
    </div>
    <div v-if="saleInfoList.length">
      <a-descriptions bordered v-for="item in saleInfoList" :key="item.date">
        <a-descriptions-item :label="label">{{ item.date }}</a-descriptions-item>
        <a-descriptions-item label="总价">{{ item.allPrice }}</a-descriptions-item>
      </a-descriptions>
    </div>
    <div v-else class="flex justify-center text-lg">
      暂无数据
    </div>
  </div>
</template>

<script lang='ts' setup>
import { ref } from 'vue'
import { saleInfoByYear, saleInfoByMonth, saleInfoByDay } from '@/api/price'
import { message } from 'ant-design-vue'
interface SaleInfo {
  date: string
  allPrice: number
}

const year = ref('')
const month = ref('')
const label = ref('年')
const saleInfoList = ref<SaleInfo[]>([])

const getSaleInfoByYear = async () => {
  label.value = '年'
  const { data: { data } } = await saleInfoByYear()
  saleInfoList.value = data
}

const getSaleInfoGroupByMonth = async () => {
  if (!year.value) return message.info('请输入年份用以查询')
  label.value = '月'
  const { data: { data } } = await saleInfoByMonth(year.value)
  saleInfoList.value = data

}

const getSaleInfoGroupByDay = async () => {
  if (!year.value && !month.value) return message.info('请输入年月用以查询')
  label.value = '日'
  const { data: { data } } = await saleInfoByDay(year.value, month.value)
  saleInfoList.value = data
}






getSaleInfoByYear()
</script>
<style scoped>
.btn {
  @apply w-16 h-10 font-sans bg-purple-300 rounded transform focus:ring-4 focus:ring-purple-500 focus:ring-opacity-50 focus:outline-none hover:scale-110 hover:opacity-100 opacity-90;
  @apply transition-transform duration-200 ease-out;
}
</style>